<template>
  <DictDataSearch
    ref="searchRef"
    style="margin-bottom: -14px"
    @search="reload"
  />
  <ele-pro-table
    ref="tableRef"
    v-model:selections="selections"
    row-key="dictDataId"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    highlight-current-row
    :footer-style="{ paddingBottom: '16px' }"
    cache-key="systemDictDataTable"
  >
    <template #toolbar>
      <el-button
        type="primary"
        class="ele-btn-icon"
        :icon="PlusOutlined"
        @click="openEdit()"
      >
        新增
      </el-button>
      <el-button
        type="danger"
        class="ele-btn-icon"
        :icon="DeleteOutlined"
        @click="remove()"
      >
        删除
      </el-button>
    </template>
    <template #action="{ row }">
      <el-link type="primary" underline="never" @click="openEdit(row)">
        编辑
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="danger" underline="never" @click="remove(row)">
        删除
      </el-link>
    </template>
  </ele-pro-table>
  <DictDataEdit
    v-model="showEdit"
    :data="current"
    :dict-id="dictId"
    @done="reload"
  />
</template>

<script setup>
import {
  pageDictionaryData,
  removeDictionaryDataBatch,
} from '@/api/system/dictionary-data'
import { DeleteOutlined, PlusOutlined } from '@/components/icons'
import { EleMessage } from 'ele-admin-plus/es'
import { ElMessageBox } from 'element-plus/es'
import { ref, watch } from 'vue'
import DictDataEdit from './dict-data-edit.vue'
import DictDataSearch from './dict-data-search.vue'

const props = defineProps({
  /** 字典id */
  dictId: Number,
})

/** 搜索栏实例 */
const searchRef = ref(null)

/** 表格实例 */
const tableRef = ref(null)

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'dictDataName',
    label: '字典数据名',
    sortable: 'custom',
    minWidth: 120,
  },
  {
    prop: 'dictDataCode',
    label: '字典数据值',
    sortable: 'custom',
    minWidth: 120,
  },
  {
    prop: 'sortNumber',
    label: '排序号',
    sortable: 'custom',
    width: 100,
    align: 'center',
  },
  {
    prop: 'createTime',
    label: '创建时间',
    sortable: 'custom',
    minWidth: 110,
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 130,
    align: 'center',
    slot: 'action',
  },
])

/** 表格选中数据 */
const selections = ref([])

/** 当前编辑数据 */
const current = ref(null)

/** 是否显示编辑弹窗 */
const showEdit = ref(false)

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return pageDictionaryData({
    ...where,
    ...orders,
    page,
    limit,
    dictId: props.dictId,
  })
}

/** 刷新表格 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开编辑弹窗 */
function openEdit(row) {
  current.value = row ?? null
  showEdit.value = true
}

/** 删除 */
function remove(row) {
  const rows = row === null ? selections.value : [row]
  if (!rows.length) {
    EleMessage.error('请至少选择一条数据')
    return
  }
  ElMessageBox.confirm(
    `确定要删除“${rows.map(d => d.dictDataName).join(', ')}”吗?`,
    '系统提示',
    { type: 'warning', draggable: true },
  )
    .then(() => {
      const loading = EleMessage.loading('请求中..')
      removeDictionaryDataBatch(rows.map(d => d.dictDataId))
        .then((msg) => {
          loading.close()
          EleMessage.success(msg)
          reload()
        })
        .catch((e) => {
          loading.close()
          EleMessage.error(e.message)
        })
    })
    .catch(() => {})
}

// 监听字典id变化
watch(
  () => props.dictId,
  () => {
    searchRef.value?.resetFields?.()
    reload({})
  },
)
</script>
